<template>
  <div class="accountLogin">
    <div class="inputArea">
      <el-form
        id="accountLogin"
        :model="loginForm"
        ref="loginFormRef"
        label-position="left"
        label-width="0px"
        class="login-container"
      >
        <el-form-item prop="username">
          <el-input
            type="text"
            v-model="loginForm.username"
            autocomplete="off"
            placeholder="请输入用户名"
            @input="usernameInputChange(loginForm.username, isRight, message)"
            ref="username"
            maxlength="16"
          ></el-input>
          <span
            v-show="isRight === 0"
            style="color: #f70404; display: block; font-size: 12px"
            >{{ message }}</span
          >
          <span
            v-show="isRight === 1"
            style="color: #22b865; display: block; font-size: 12px"
            >{{ message }}</span
          >
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            type="password"
            v-model="loginForm.password"
            autocomplete="off"
            placeholder="请输入密码"
            show-password
            @input="
              passwordInputChange(loginForm.password, passIsRight, passMsg)
            "
            maxlength="16"
          ></el-input>
          <span
            v-show="passIsRight === 0"
            style="color: #f70404; display: block; font-size: 12px"
            >{{ passMsg }}</span
          >
          <span
            v-show="passIsRight === 1"
            style="color: #22b865; display: block; font-size: 12px"
            >{{ passMsg }}</span
          >
          <i></i>
        </el-form-item>
      </el-form>
    </div>
    <button class="loginBtn" @click="login()">登录</button>
    <div class="loginFooter">
      <div class="others">
        <router-link class="forget" to="/resetPassword">忘记密码</router-link>
        <router-link class="register" to="/register">注册</router-link>
      </div>
    </div>
  </div>
</template>

<script>
import qs from "qs";
import Base64 from "base-64";
import throttling from "@/public/throttling.js";
export default {
  name: "accountLogin",
  data() {
    return {
      isRight: 0,
      passIsRight: 0,
      message: "",
      passMsg: "",
      // 判断身份
      identify: 0,
      // 引用
      // loginFormRef: "",
      loginForm: {
        password: "",
        username: "",
      },
    };
  },
  methods: {
    // 用户名输入验证
    usernameInputChange(username, isRight, message) {
      this.isRight = this.$publicAPI.usernameInputChange(
        username,
        isRight,
        message
      ).isRight;
      this.message = this.$publicAPI.usernameInputChange(
        username,
        isRight,
        message
      ).message;
    },
    passwordInputChange(username, isRight, message) {
      this.passIsRight = this.$publicAPI.passwordInputChange(
        username,
        isRight,
        message
      ).isRight;
      this.passMsg = this.$publicAPI.passwordInputChange(
        username,
        isRight,
        message
      ).message;
    },
    // 登录
    login: throttling(function () {
      var _this = this;
      this.$axios
        .get(
          "/login/" +
            _this.loginForm.username +
            "/" +
            Base64.encode(this.loginForm.password),
          {
            headers: {
              "Content-Type": "application/x-www-form-urlencoded",
            },
          }
        )
        .then((res) => {
          console.log(res);
          if (res.data.status === 899) {
            this.$message.error(res.data.message);
          } else if (res.data.status === 888) {
            this.$message.error(res.data.message);
          } else if (res.data.status === 789) {
            this.$message.error(res.data.message);
          } else {
            if (res.data.code === 201) {
              this.$message({
                message: "管理员登录成功",
                type: "success",
              });
              console.log(res.data.code);
              window.sessionStorage.setItem("identify", res.data.code);
              _this.$store.commit("managerLogin", _this.loginForm.username);
              // //全局存储token
              window.sessionStorage.setItem("tokenvalue", res.data.token);
              this.$router.replace({ path: "/" });
            } else if (res.data.code === 200) {
              window.sessionStorage.setItem("identify", res.data.code);
              _this.$store.commit("login", _this.loginForm.username);
              window.sessionStorage.setItem("tokenvalue", res.data.token);
              // console.log(222);
              this.$message({
                message: "用户登录成功",
                type: "success",
              });
              this.$router.replace({ path: "/" });
            } else if (res.data.code === 404) {
              this.$message({
                message: "对不起，你没有管理员权限！",
                type: "error",
              });
            } else if (res.data.code === 401) {
              this.$message.error("密码必须大于等于6位！");
            } else {
              this.$message.error("登录失败，请重试！");
            }
          }
        })
        .catch((failResponse) => {
          // this.$message.error("登录格式有误，请重试！");
        });
      // });
    }, 1000),
    // 切换到邮箱登录
    change() {
      this.$router.push("/emailLogin");
    },
  },
};
</script>

<style scoped>
.inputArea {
  position: absolute;
  margin-top: 60px;
  width: 700px;
  height: 120px;
  left: 50%;
  margin-left: -147px;
  top: 30px;
}

.inputArea .el-input {
  width: 300px;
  height: 30px;
  border-radius: 5px;
}

.inputArea input:focus {
  border: 2px solid rgba(255, 101, 0);
}

.el-form-item {
  height: 50px;
}

.el-form-item /deep/ .el-form-item__content {
  height: 50px;
}

.user,
.pwd {
  height: 80px;
}

.user {
  margin-bottom: 5px;
}

.user .tips span,
.pwd .tips span {
  display: block;
  float: left;
  margin-right: 3px;
  width: 25px;
  height: 25px;
  background: url("../../assets/提示.png");
  background-position: -35px 59px;
}

.tips p {
  color: red;
  font-size: 14px;
  padding-top: 1px;
}

.wrong {
  background: url("../../assets/提示.png");
  background-position: -35px 59px;
}

.right {
  background: url("../../assets/提示.png");
  background-position: 0 59px;
}

.identifyChoose {
  position: absolute;
  width: 350px;
  left: 50%;
  margin-left: -175px;
  height: 50px;
  line-height: 50px;
  bottom: 115px;
}

.identifyChoose a {
  display: inline-block;
  width: 100px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border: 1px solid rgba(215, 215, 215);
  border-radius: 5px;
  color: #666;
}

.identifyChoose a:hover {
  color: rgba(255, 101, 0);
}

.manage {
  position: absolute;
  right: 0;
  top: 4px;
}

.loginBtn {
  position: absolute;
  bottom: 50px;
  width: 300px;
  height: 50px;
  background-color: rgba(255, 101, 0);
  color: white;
  font-weight: bold;
  border-radius: 5px;
  left: 50%;
  margin-left: -150px;
}

.loginFooter {
  position: absolute;
  bottom: 0px;
  margin-top: 20px;
  width: 100%;
  height: 30px;
  right: 100px;
}

.loginFooter .auto {
  width: 130px;
  float: left;
}

.loginFooter .auto span {
  margin-left: 5px;
  font-size: 14px;
}

.loginFooter .others {
  width: 120px;
  float: right;
}

.loginFooter .others .forget {
  display: inline-block;
  width: 80px;
  color: #666;
}
</style>
